<template>
  <div class="page-header">
    <div class="page-body d-flex justify-content-between align-items-center">
      <div class="body-left">
        <div class="btn-container">
          <button class="left-btn" @click="clickHandler">
            <span class="btn-item"></span>
            <span class="btn-item"></span>
            <span class="btn-item"></span>
          </button>
        </div>
        <div class="left-down" :class="isClicked?'clicked':''">
          <ul class="left-down-menu">
            <li>
              <a href="" class="font-gray-1">
                <i class="iconfont icon-search fs-md c-pointer"></i>
                搜索
              </a>
            </li>
            <li>
              <router-link class="fs-md font-gray-1" tag="a" to="/courses">课程<i
                  class="iconfont icon-arrow-sortdown-small"></i></router-link>
            </li>
            <li>
              <router-link tag="a" to="/me" class=" font-gray-1">学习中心</router-link>
            </li>
            <li>
              <router-link tag="a" to="/classroom" class=" font-gray-1">班级</router-link>
            </li>
            <li>
              <router-link tag="a" to="/group" class="font-gray-1">小组</router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="body-center d-flex">
        <div class="logo">
          <router-link to="/" tag="a">
            <img src="../assets/logo.png" alt="" />
          </router-link>
        </div>
        <nav class="nav-options">
          <div class="d-flex">
            <div class="nav-common">
              <router-link class="fs-md font-gray-1" to="/me" tag="a">学习中心</router-link>
            </div>
            <div class="nav-item-course">
              <router-link tag="a" class="nav-link-item nav-link-course fs-md font-gray-1" to="/courses">课程<i
                  class="iconfont icon-arrow-sortdown-small"></i></router-link>
              <ul class="hover-down">
                <li v-for="item in secCoursesList.data" :key="item._id">
                  <router-link tag="a" :to="`/channel/${item._id}`">{{item.name}}</router-link>
                </li>
              </ul>
            </div>
            <div class="nav-common">
              <router-link tag="a" class="fs-md font-gray-1" to="/classroom">班级</router-link>
            </div>
            <div class="nav-common">
              <router-link tag="a" class="fs-md font-gray-1" to="/group">小组</router-link>
            </div>
          </div>
        </nav>
      </div>
      <div class="body-right d-flex">
        <div class="search d-flex fs-sm align-items-center">
          <div class="course-type">
            <span class="c-pointer">课程<i class="iconfont icon-arrowdown fs-xs"></i></span>
          </div>
          <div class="course-search d-flex">
            <input type="text" placeholder="输入要查找的内容" class="font-gray" />
            <div class="">
              <span class="iconfont icon-search fs-xl font-green c-pointer"></span>
            </div>
          </div>
        </div>
        <div class="login d-flex fs-md font-green">
          <div class="is-login d-flex" v-if="token">
            <div class="add-course">
              <a href="#">
                <i class="iconfont icon-add"></i>
                <span>创建课程</span>
              </a>
            </div>
            <div class="user-avatar">
              <img src="http://www.howzhi.com/assets/img/default/avatar.png?7.5.15.6" alt="">
              <div class="avatar-down" :class="isClicked?'clicked':''">
                <ul class="left-down-menu">
                  <li>
                    <router-link to="/me" tag="a" class="font-gray-1">
                      <i class="iconfont icon-bank-fill fs-md"></i>学习中心
                    </router-link>
                  </li>
                  <li>
                    <router-link tag="a" class="fs-md font-gray-1" to="#">
                      <i class="iconfont icon-xuexi fs-md"></i>个人主页
                    </router-link>
                  </li>
                  <li>
                    <router-link tag="a" class="fs-md font-gray-1" to="/settings">
                      <i class="iconfont icon-Settingscontroloptions fs-md"></i>个人设置
                    </router-link>
                  </li>
                  <li><a href="#" class=" font-gray-1">
                      <i class="iconfont icon-qianbao fs-md"></i>账户中心</a></li>
                  <li><a href="#" class=" font-gray-1" @click="exitLogin">
                      <i class="iconfont icon-tuichu fs-md"></i>退出登录</a></li>
                </ul>
              </div>
            </div>
            <div class="user-alert">
              <i class="iconfont icon-alarm font-light"></i>
            </div>
          </div>
          <div class="isnot-login" v-else>
            <router-link to="/login" tag="div" class="c-pointer">登录</router-link>
            <router-link to="/register" tag="div" class="c-pointer">注册</router-link>
          </div>
          <div class="to-app c-pointer">
            <span class="icon-container"><span class="red-dot"></span><i class="iconfont icon-phone"></i></span>
            <span class="fs-xs">好知APP</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed, getCurrentInstance } from 'vue'
import { getAllCoursesCategories } from '../api'
import { useStore, mapActions } from 'vuex'
import Router from '../router'
export default {
  setup () {
    const secCoursesList = reactive({
      data: []
    })
    let isClicked = ref(false)
    const instance = getCurrentInstance()
    // vuex
    const store = useStore()
    const token = computed(() => store.state.token)

    // 按钮点击事件
    function clickHandler () {
      isClicked.value = !isClicked.value
    }
    console.log(token)

    // 获取用户信息
    onMounted(async () => {
      const res = await getAllCoursesCategories()
      res.data.shift()
      secCoursesList.data = res.data
    })

    // 退出登录的事件
    function exitLogin () {
      localStorage.clear()
      instance.appContext.config.globalProperties.$message.success('退出登录成功！')
      Router.push('/login')
    }
    return { secCoursesList, token, isClicked, clickHandler, exitLogin }
  },
  methods: {
    ...mapActions(['getCurrentToken'])
  },
  mounted () {
    this.getCurrentToken()
  }
}
</script>

<style lang="scss" scoped>
.page-header {
  box-shadow: 1.5px 2.598px 9px 0 rgba(0, 0, 0, 0.054);
  background-color: #fff;
  position: relative;
  .page-body {
    line-height: 80px;
    white-space: nowrap;
    // body-left
    .body-left {
      display: none;
      @media (max-width: 768px) {
        display: block;
      }
      position: relative;
      .btn-container {
        display: flex;
        justify-content: center;
        .left-btn {
          outline: none;
          width: 40px;
          height: 40px;
          border: none;
          background-color: #15c288;
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .btn-item {
            width: 60%;
            height: 3px;
            background-color: #fff;
            margin: 3px 0;
          }
        }
      }
      .left-down {
        &.clicked {
          display: block !important;
        }
        display: none;
        z-index: 999;
        width: 100px;
        position: absolute;
        left: -50%;
        .left-down-menu {
          background-color: #fff;
          list-style: none;
          display: flex;
          flex-direction: column;
          li {
            line-height: 20px;
            padding: 15px 10px;
            text-align: center;
          }
        }
      }
    }
    // body-center
    .logo {
      a {
        display: block;
        img {
          width: 102px;
          padding: 15px 10px;
        }
      }
    }
    .nav-options {
      @media (max-width: 768px) {
        display: none;
      }
      .nav-common {
        padding: 0 25px;
        // @media (max-width: 1295px) {
        //   padding: 0 5px;
        // }
      }
      .nav-item-course {
        position: relative;
        padding: 0 25px;
        &:hover > .hover-down {
          display: inline-block;
        }
        .hover-down {
          &:hover {
            display: inline-block;
          }
          position: absolute;
          z-index: 999;
          min-width: 265px;
          list-style: none;
          display: none;
          padding: 5px;
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
          top: 80px;
          left: -25%;
          // grid-template-rows: 1fr 1fr 1fr;
          // grid-template-columns: 1fr 1fr 1fr;
          background-color: #fff;
          transition: all 0.1s ease;
          li {
            width: 33%;
            float: left;
            min-width: 85px;
            padding: 10px 0;
            flex-wrap: wrap;
            line-height: 15px;
            text-align: center;
            &:hover {
              background-color: #15c288;
              a {
                color: #fff !important;
              }
            }
            a {
              color: #616161;
            }
          }
        }
      }
    }
    // body-right
    .search {
      .course-type {
        @media (max-width: 1096px) {
          display: none;
        }
        span {
          height: 25px;
          padding: 0 15px;
          border-left: 1px solid #f0f0f0;
          border-right: 1px solid #f0f0f0;
          .iconfont {
            padding-left: 5px;
            font-weight: 600;
          }
        }
      }
      .course-search {
        @media (max-width: 992px) {
          display: none !important;
        }
        padding-right: 30px;
        input {
          padding-left: 15px;
          width: 135px;
          outline: none;
          border: none;
        }
        .iconfont {
          display: inline-block;
          height: 34px;
          width: 50px;
          line-height: 34px;
          padding-left: 10px;
          padding-right: 10px;
          border-right: 1px solid #f0f0f0;
        }
      }
    }
    .login {
      .is-login {
        .user-avatar {
          padding: 0 10px;
          cursor: pointer;
          position: relative;
          &:hover > .avatar-down {
            display: block !important;
          }
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid transparent;
            position: relative;
            top: -2px;
            &:hover {
              border: 2px solid #c0f0e0;
            }
          }
          .avatar-down {
            display: none;
            z-index: 999;
            // width: 100px;
            position: absolute;
            left: -50%;
            .left-down-menu {
              background-color: #fff;
              list-style: none;
              display: flex;
              flex-direction: column;
              li {
                line-height: 20px;
                padding: 15px 15px;
                text-align: center;
                .iconfont {
                  padding: 0 10px 0 0 !important;
                }
                &:hover a {
                  color: #15c288;
                }
              }
            }
          }
        }
        .user-alert {
          padding: 0 10px;
          cursor: pointer;
          @media (max-width: 768px) {
            display: none;
          }
        }
        .add-course {
          padding-right: 10px;
          @media (max-width: 768px) {
            display: none;
          }
          a {
            padding: 6px 12px;
            background-color: #15c288;
            color: white;
            border-radius: 20px;
            font-size: 14px;
            .icon-add {
              font-size: 10px;
              padding-right: 2px;
            }
            &:hover {
              color: #fff !important;
              background-color: #13ab78;
            }
          }
        }
      }
      .c-pointer {
        padding: 0 10px;
        color: #15c288;
      }
      .to-app {
        @media (max-width: 1200px) {
          display: none;
        }
        .icon-container {
          position: relative;
          .red-dot {
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: red;
            right: 2px;
            top: 1px;
          }
        }
      }
    }
  }
}
</style>
